<template>
    <!-- 查询条件 -->
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-row :gutter="24">
                    <el-col :span="10" :offset="0">
                        <el-button plain @click="dialogFormVisible = true" type="primary">
                            新增房号
                        </el-button>
                        <el-button type="danger" @click="BatchsDel()">批量删除</el-button>
                        <el-dialog v-model="dialogFormVisible" title="新增房号" width="500">
                            <el-form ref="ruleFormRef" style="max-width: 600px" :model="From" :rules="rules"
                                label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
                                <el-form-item label="选择房型" prop="rtid">
                                    <el-select v-model="From.rtid" placeholder="请选择房型">
                                        <el-option v-for="(item, index) in roomTypeData" :key="index"
                                            :label="item.Rtname" :value="item.Rtid" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="房号" prop="roomNumber">
                                    <el-input v-model="From.roomNumber" placeholder="房号" />
                                </el-form-item>
                                <el-form-item label="排序" prop="rank">
                                    <el-input v-model="From.rank" placeholder="排序" />
                                    <h1>数字越大排越前</h1>
                                </el-form-item>
                                <el-form-item label="备注" prop="remark">
                                    <el-input v-model="From.remark" placeholder="备注" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                                        确认
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                    </el-col>
                    <el-col :span="14" :offset="0">
                        <el-form :inline="true" :model="seachData" class="demo-form-inline">
                            <el-form-item>
                                <el-select v-model="seachData.rtid" clearable placeholder="请选择" value="-1"
                                    @change="handleRegionChange" size="500px">
                                    <el-option label="全部房型" value="-1" />
                                    <el-option v-for="item in roomTypeData" :key="item.Rtid" :label="item.Rtname"
                                        :value="item.Rtid" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="seachData.roomNumber" placeholder="房号" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="GetRoomTypeList">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
    <!-- 房号显示 -->
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55px" align="center" />
        <el-table-column prop="Rtname" label="房型名称" align="center" />
        <el-table-column prop="RoomNumber" label="房号" align="center" />
        <el-table-column prop="Rank" label="排序" align="center" />
        <el-table-column prop="Remark" label="备注" align="center" />
        <el-table-column prop="State" label="状态" align="center">
            <template v-slot="scope">
                <el-text v-if="scope.row.State == 1">上架</el-text>
                <el-text v-else>下架</el-text>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template v-slot="scope">
                <el-link type="primary" @click="FindRoomNum(scope.row.RoomId)">编辑</el-link>&nbsp;&nbsp;
                <el-link type="primary" @click="DelRoomNum(scope.row.RoomId)">删除</el-link>&nbsp;&nbsp;
                <el-link type="primary" @click="UpdState(scope.row.RoomId, scope.row.State)"
                    v-if="scope.row.State == 0">上架</el-link>
                <el-link type="primary" @click="UpdState(scope.row.RoomId, scope.row.State)" v-else>下架</el-link>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <table style="margin:0 auto">
        <tr>
            <td>
                <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[1, 2, 3, 4]"
                    :small="small" :background="background" layout="total,slot, sizes" :total="totalCount"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                    next-text="下一页">
                    <span>，共计{{ pageCount }}页，当前{{ pageIndex }}/{{ pageCount }}页</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[1, 2, 3, 4]"
                    :small="small" :background="background" layout="slot,prev, pager, next" :total="totalCount"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                    next-text="下一页">
                    <button @click="handleCurrentChange(1)" :disabled="pageIndex == 1" class="btn-prev">首页</button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[1, 2, 3, 4]"
                    :small="small" :background="background" layout="slot,jumper" :total="totalCount"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                    next-text="下一页">
                    <button @click="handleCurrentChange(pageCount)" :disabled="pageIndex == pageCount"
                        class="btn-prev">尾页</button>
                </el-pagination>
            </td>
        </tr>
    </table>

    <!-- 房号修改开始 -->
    <el-dialog v-model="dialogFormVisible1" title="修改房号" width="500">
        <el-form style="max-width: 600px" :model="ruleForm" label-width="auto" class="demo-ruleForm" :size="formSize"
            status-icon>
            <el-form-item label="选择房型">
                <el-select v-model="ruleForm.Rtid" placeholder="请选择房型" :disabled="true">
                    <el-option v-for="(item, index) in roomTypeData" :key="index" :label="item.Rtname"
                        :value="item.Rtid" />
                </el-select>
            </el-form-item>
            <el-form-item label="房号">
                <el-input v-model="ruleForm.RoomNumber" placeholder="房号" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="ruleForm.Rank" placeholder="排序" />
                <h1>数字越大排越前</h1>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="ruleForm.Remark" placeholder="备注" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="UpdRoomNum()">
                    修改
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 房号修改结束 -->
</template>
<script setup lang="ts">

import axios from 'axios';

import { reactive, ref, onMounted } from 'vue'

axios.defaults.baseURL = 'http://localhost:5199/api/';

import { ElButton, ElDialog } from 'element-plus'

import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const formSize = ref('default')

import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router';

const background = ref(false)

const small = ref(false)
//const visible = ref(false)
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)

/* 查询条件 */
const seachData = reactive({
    rtid: "",
    roomNumber: ""
})

/* 查询条件 */
const pageIndex = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);
const pageCount = ref(0);

// 定义列表
const tableData = ref([]);//房号列表
const roomTypeData = ref([]);//房型下拉

const multipleSelection = ref([]);//选中的房号

//房号修改
interface IRuleForm {
    RoomId: number,
    Rtid: number,
    RoomNumber: number,
    Rank: number,
    Remark: string,
}

const ruleForm = ref<IRuleForm>({})

// 房号添加
const From = reactive({
    rtid: "",
    roomNumber: "",
    rank: "",
    remark: ""
})

// 定义表单验证规则
const rules = reactive<FormRules>({
    rtid: [
        {
            required: true,
            message: '请选择房型',
            trigger: 'change',
        }
    ],
    roomNumber: [
        { required: true, message: '请输入房号', trigger: 'blur' },
    ],
    rank: [{ required: true, message: '请输入排序', trigger: 'blur' }],
    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]

})

//房号显示查询分页
const GetRoomTypeList = () => {
    axios.get('RoomNum/GetRoomNumList', {
        params: {
            rtid: seachData.rtid || '-1',
            roomNumber: seachData.roomNumber || null,
            pageIndex: pageIndex.value,
            pageSize: pageSize.value,
        }
    }).then((res) => {
        tableData.value = res.data.Data;
        totalCount.value = res.data.TotalCount;
        pageCount.value = res.data.PageCount;
    })
}

//房型列表显示
function GetRoomList() {
    axios.get('RoomType/GetRoomList')
        .then((res) => {
            roomTypeData.value = res.data;
        })
}

//选中的房号
function handleSelectionChange(val: any) {
    multipleSelection.value = val;
}
//房号添加
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            axios.post('RoomNum/RoomNumAdd', From)
                .then((res) => {
                    if (res.data.Code == 200) {
                        ElMessage.success('新增成功');
                        dialogFormVisible.value = false;
                        GetRoomTypeList();
                        router.push({ path: '/index/subIndex/RoomTypeList' });
                    }
                    else {
                        ElMessage.error(res.data.Msg);
                        return;
                    }
                })

        }
    })
}

//房号删除
const DelRoomNum = (RoomId) => {
    ElMessageBox.confirm(
        '确认删除房号?',
        '房号删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete(`RoomNum/DeleteRoomNumber?roomId=${RoomId}`).then(res => {
                if (res.data.Code == 200) {
                    ElMessage.success('删除成功');
                    GetRoomTypeList();
                } else {
                    ElMessage.error('删除失败');
                    return;
                }
            })
        })
        .catch(() => {

        })
}

//房号批量删除
const BatchsDel = () => {
    if (multipleSelection.value.length == 0) {
        ElMessage.warning('请选择一个要删除的房号');
        return;
    }
    ElMessageBox.confirm(
        '确认删除房号?',
        '房号删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.put(`RoomNum/BatchDelRoomNum`, multipleSelection.value).then(res => {
                if (res.data.Code == 200) {
                    ElMessage.success('删除成功');
                    GetRoomTypeList();
                } else {
                    ElMessage.error('删除失败');
                    return;
                }
            })
        })
        .catch(() => {

        })
}

const handleRegionChange = () => {
    GetRoomTypeList();
}

const handleSizeChange = (val: number) => {
    pageSize.value = val;
    GetRoomTypeList();
}

const handleCurrentChange = (val: number) => {
    pageIndex.value = val;
    GetRoomTypeList();
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

//上架下架
const UpdState = (RoomId, State) => {
    axios.get(`RoomNum/UpdState?roomid=${RoomId}&state=${State}`).then(res => {
        if (res.data.Code == 200) {
            ElMessage.success('操作成功');
            GetRoomTypeList();
        }
        else {
            ElMessage.error('操作失败');
            return;
        }
    })
}

//房号反填
function FindRoomNum(RoomId: number) {
    axios.get(`RoomNum/GetFindRoomNum?roomId=${RoomId}`).then(res => {
        ruleForm.value = res.data.Data;
        console.log(ruleForm.value);
    })
    dialogFormVisible1.value = true;
}

//房号修改
const UpdRoomNum = () => {
    axios.post('RoomNum/UpdRoomNum', ruleForm.value).then(res => {
        if (res.data.Code == 200) {
            ElMessage.success('修改成功');
            GetRoomTypeList();
            dialogFormVisible1.value = false;
        }
        else {
            ElMessage.error('修改失败');
            return;
        }
    })
}

//勾子函数
onMounted(() => {
    GetRoomTypeList();
    GetRoomList();
})
</script>

<style scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>